<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设备列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/assets/css/index.css">

</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        {volist name="$devices" id="vo"}
        <div class="layui-row-cell layui-col-xs12 layui-col-sm5 layui-col-md4">
            <div class="item">
                <p>{$vo.name}</p>
                <label class="power">
                    <a class="layui-icon">&#xe682;</a>
                    <input onclick="action({$key}, this)" value="{$vo.status}" type="checkbox" name="power">
                </label>
            </div>
        </div>
        {/volist}
    </div>
</div>
<script src="/layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
    layui.use(['form', 'layer'], function(){
        let form = layui.form;
        let layer = layui.layer;
    });
    function action(index, ele) {
        let act = ele.value === '1' ? 'off' : 'on';
        layer.confirm(act==='off'?'确定关机吗？':'确定开机吗？', {icon: 3, anim: 5, title: '询问'}, function (layerIndex) {
            layer.close(layerIndex);
            $.post('', {index:index, action:act}, function (res) {
                if (res.code === 1) {
                    layer.msg(res.msg, {icon: 1});
                    displayPower(index, act)
                }else{
                    layer.msg(res.msg, {icon: 2, anim: 6, time:3000});
                }
            });
        });

        return false;
    }

    function displayPower(index, act){
        let powerEle = $('.layui-row-cell').find('label').eq(index);
        if(act === 'on'){
            powerEle.addClass('power-on');
            powerEle.find('input[type=checkbox]').val(1);
        }else{
            powerEle.removeClass('power-on');
        }
    }



    $(function () {


        let index = layer.load(1, {shade: 0.5}); //0代表加载的风格，支持0-2
        $('.layui-row-cell').each((id, ele) => {
            if ($(ele).find('input[type=checkbox]').val() === '1') {
                displayPower(id, 'on')
            }
        });

        layer.close(index)

        //10秒刷新一次页面，查看设备在线状态
        let getDevices = function (){
            $.post("{:url('Index/getLanDevices')}", {}, function (res) {
                if(res.code !==1) return false;
                res.data.forEach(function (item, index) {
                    if (item.status === 1) {
                        displayPower(index, 'on')
                    }
                });
            });
        }
        setInterval(getDevices, 5000);
    });
</script>
</body>
</html>